<template>
  <!-- 小龙直营 -->
  <div class="allpage">
    <el-form
      label-width="80px"
      class="form-style"
      :model="ruleForm"
      :inline="true"
      :rules="rules"
      ref="ruleForm"
    >
      <!-- style="border-bottom:1px solid #ccc;padding:5px;box-sizing:border-box" -->
      <el-row>
        <el-col :span="7">
          <el-form-item prop="input" style="margin: 15px 0 0 30px">
            <el-input
              v-model="ruleForm.input"
              placeholder="团购主题"
              class="input"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item prop="time" style="margin: 15px 0 0 30px">
            <el-date-picker
              type="date"
              v-model="ruleForm.time"
              @change="getSTime"
              placeholder="发布日期"
              value-format="yyyy-MM-dd"
              class="input"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <!-- label-position="left" label-width="50px" -->
          <el-form-item
            label-width="100px"
            prop="value"
            label="团购状态："
            style="margin: 15px 0 0 30px"
          >
            <el-select v-model="ruleForm.value" placeholder="全部">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        style="
          border-bottom: 1px solid #eee;
          padding: 5px;
          box-sizing: border-box;
        "
      >
        <el-col :span="9">
          <el-form-item
            label-width="100px"
            prop="value1"
            label="供应商："
            style="margin: 15px 0 0 30px"
          >
            <el-select v-model="ruleForm.value1" placeholder="全部">
              <el-option
                v-for="(opitem, opindex) in options1"
                :key="opindex"
                :label="opitem.SupplierName"
                :value="opitem.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="margin: 15px 0 0 30px">
            <el-button
              icon="el-icon-refresh"
              type="warning"
              @click="clean('ruleForm')"
              >重置</el-button
            >
            <el-button icon="el-icon-search" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button
            style="margin: 10px 0 10px 30px"
            type="success"
            @click="release('add')"
            >新增活动</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <div class="table-style">
      <el-table class="dire-mid" :data="tableData" border>
        <el-table-column label="排序" width="80">
          <template slot-scope="scope">
            <el-input v-show="scope.row.GroupBuyStatus" v-model="scope.row.name"></el-input>
            </template>
            </el-table-column>
        <el-table-column
          prop="GBNumber"
          label="团购码"
          width="140"
        ></el-table-column>
        <el-table-column label="团购主题" width="100">
          <template slot-scope="scope">
            <div class="twoline">{{scope.row.GroupBuyTitle}}</div>
          </template>
        </el-table-column>
        <el-table-column label="团购内容" width="100">
          <template slot-scope="scope">
            <div class="dire-mid-img" v-if="scope.row.GroupBuyContent">
              <!-- <el-image
                style="width:50px;height:50px"
                v-for="(item,index) in (scope.row.imgs).slice(0,2)"
                :key="index"
                :src="item"
              ></el-image> -->
              <el-image v-image-preview style="width:70px;height:70px" :src="scope.row.GroupBuyContent"></el-image>
            </div>
            <div v-else >--</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="GroupBuyStartTime"
          label="活动开始时间"
        ></el-table-column>
        <el-table-column
          prop="GroupBuyEndTime"
          label="活动结束时间"
        ></el-table-column>
        <el-table-column prop="name" label="供应商">--</el-table-column>
        <el-table-column prop="GroupBuyStatusStr" label="团购状态">
          <template slot-scope="scope">
            <p
              v-show="scope.row.GroupBuyStatusStr === '已发布'"
              style="color: red"
            >
              已发布
            </p>
            <p
              v-show="scope.row.GroupBuyStatusStr === '已结束'"
              style="color: green"
            >
              已结束
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="200" prop="GroupBuyStatus">
          <template slot-scope="scope">
            <div v-show="scope.row.GroupBuyStatus === 0">
              <el-button
                size="mini"
                type="primary"
                @click="release('edit', scope.row.GBNumber)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="del(scope.row)"
                >删除</el-button
              >
            </div>
            <div v-show="scope.row.GroupBuyStatus === 1">
              <el-button
                size="mini"
                type="primary"
                @click="release('edit', scope.row.GBNumber)"
                >编辑</el-button
              >
              <el-button size="mini" type="danger" @click="del(scope.row)"
                >删除</el-button
              >
            </div>
            <div v-show="scope.row.GroupBuyStatus === 2">
              <el-button
                size="mini"
                type="primary"
                @click="release('edit', scope.row.GBNumber)"
                >重新发布</el-button
              >
              <el-button size="mini" type="danger" @click="del(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import {
  ProductApi,
  DeleteGroupBuy,
  GetGBNumber,
  LoadSuppliers,
} from "@/request/api";
export default {
  methods: {
    async release(type, id) {
      let Num = "";
      switch (type) {
        case "add":
          await GetGBNumber({})
            .then((result) => {
              Num = result.Data;
            })
            .catch((err) => {
              console.log(err);
            });
          break;
        default:
          break;
      }
      this.$router.push({
        path: "/directly/editEventPage",
        query: { GBNumber: id || Num, type: type },
      });
    },
    // ===================================done===================================
    //删除
    del(row) {
      if (row.GBNumber) {
        this.$confirm("是否要删除该条信息?", "删除提示", {})
          .then((res) => {
            DeleteGroupBuy({
              GBNumber: row.GBNumber,
            }).then((res) => {
              if (res.Message) {
                this.$confirm("该条信息删除成功！", "删除成功", {});
                this.getTableData();
              }
            });
          })
          .catch((res) => {
            console.log(res);
          });
      }
    },
    //接口获取数据
    getTableData() {
      ProductApi({
        SreachValues: this.ruleForm.input,
        ScreenValues: "Adm",
        OS: "PC",
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        SupplierId : this.ruleForm.value1,
        StartTime : this.ruleForm.time,
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for ( let i in this.tableData ) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-');
            that.tableData[i].GroupBuyEndTime = this.tableData[i].GroupBuyEndTime.replace(/(\/)/g,'-');
            that.tableData[i].GroupBuyStartTime = this.tableData[i].GroupBuyStartTime.replace(/(\/)/g,'-');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    search() {
      this.getTableData();
    },
    //清空
    clean(ruleForm) {
      this.$refs[ruleForm].resetFields();
      this.getTableData()
    },
    //供应商select
    getSuppSelect() {
      LoadSuppliers()
        .then((res) => {
          this.options1 = res.Data;
          console.log(this.options1);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //当前页
    currentChange(event) {
      console.log(event);
      this.currentPage = event;
      this.getTableData();
    },
    //跳转页
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableData();
    },
    getSTime(val) {
      this.ruleForm.time = val;
    },
  },
  created() {
    this.getTableData();
    this.getSuppSelect();
  },
  components: {
    Botpage,
  },
  data() {
    return {
      currentPage: 1,
      PageSize: 10,
      total: 1,
      rules: {},
      ruleForm: {},
      tableData: [],
      options: [
        { value: 0, label: "已结束" },
        { value: 1, label: "已发布" },
      ],
      options1: [],
    };
  },
};
</script>

<style lang="less" scoped>
.openid {
  border: 1px solid black;
  height: 50px;
  line-height: 50px;
}
.btn-top {
  margin: 10px 0 20px 0;
}
.dire-mid-img {
  display: flex;
  justify-content: space-around;
}
</style>